﻿<template>
  <el-menu
    :default-active="defaultActiveIndex"
    class="el-menu-vertical-demo"
    @select="handleSelect"
  >
    <el-menu-item
      v-for="(item, index) in items"
      :key="index"
      :index="String(index + 1)"
    >
      {{ item }}
    </el-menu-item>
  </el-menu>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, onMounted, ref } from "vue";
import usePsyTableStore from "../../../../store/psy/psyTable";

const tableStore = usePsyTableStore();

// 传到子组件中的选项数组，初始默认选中情况为1
const props = defineProps({
  items: { type: Array as () => string[], required: true },
});

const defaultActiveIndex = ref("1");

// 传给父组件select事件，告诉已经选中了按钮
const emits = defineEmits(["select"]);
const handleSelect = (key: any, keyPath: number[]) => {
  const selectedItem = tableStore.tableKindList[keyPath[0] - 1];
  tableStore.changeTableKind(selectedItem);
  Promise.resolve().then(() => {
    emits('select', key, keyPath);
    // 异步方法
  });
};
onMounted(() => {
  emits("select");
});
</script>

<style scoped>
.el-menu-vertical-demo .el-menu-item {
  border-radius: 20px;
}

.el-menu-vertical-demo .el-menu-item.is-active {
  font-weight: bold;
  background-color: #fdece0;
}

.el-menu-item {
  height: 40px;
  font-size: 14px;
  line-height: 40px;
}

.el-menu-vertical-demo {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
</style>
